<template>
  <el-card>
    <template #header>
      <div style="float: right">
        <el-button @click="saveColumnField" type="primary">提 交</el-button>
      </div>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <el-form :model="form" label-position="left">
      <ts-card header="基础设置">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="关联的数据集id">
              <el-input v-model="form.tableId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="上级字段id">
                <el-select v-model="form.parentId" clearable placeholder="请选择：">
                <el-option
                  v-for="item in fieldList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="字段名称">
              <el-input v-model="form.label" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="字段属性">
              <el-input v-model="form.prop" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="固定列">
              <el-select v-model="form.fixed" clearable placeholder="请选择：">
                <el-option
                  v-for="item in fixList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="列类型">
              <el-select
                v-model="form.columnType"
                clearable
                placeholder="请选择："
              >
                <el-option
                  v-for="item in columnTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="计算列宽">
              <el-switch v-model="form.flexColumnWidth" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="宽度">
              <el-input v-model="form.width" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="对齐方式">
              <el-select v-model="form.align" clearable placeholder="请选择：">
                <el-option
                  v-for="item in alignList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
            <el-form-item label="表达式">
              <el-input type="textarea" v-model="form.expression" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="是否要导出">
              <el-switch v-model="form.export" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="是否为html">
              <el-switch v-model="form.html" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="是否隐藏">
              <el-switch v-model="form.hide" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
            <el-form-item label="修改状态组件类型">
              <el-select
                v-model="form.editItem.component"
                clearable
                placeholder="请选择："
                @change="editItemCompoentTypeChange"
              >
                <el-option
                  v-for="item in componentList2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </ts-card>
      <ts-card header="扩展列设置" style="margin-top: 20px">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="sql类型">
                    <el-select v-model="form.extendCols.dsType" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.dsTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="数据源服务名">
                    <el-select v-model="form.extendCols.dbService" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.dbServiceList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="数据转化类型">
                    <el-select v-model="form.extendCols.convertType" clearable placeholder="请选择：">
                        <el-option v-for="item in configData.convertTypeList" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="sql语句">
              <ts-code-editor style="width: 100%;" v-model="form.extendCols.filterSql" :height="100"></ts-code-editor>
            </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="扩展列数据转化">
                <el-input v-model="form.extColValueConverter"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="扩展列标题转化">
                <el-input v-model="form.extColumnConverter"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="行合计函数">
                <el-input v-model="form.collectFun"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-form-item label="列合计函数">
                <el-input v-model="form.horizontalCollectFun"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </ts-card>
      <ts-card header="自定义属性" style="margin-top: 20px">
      <sc-form-table
        v-model="cloneAttributes"
        :addTemplate="attributesTemplate"
        height="300"
      >
        <el-table-column label="key" width="160">
          <template #default="scope">
            <el-input v-model="scope.row.key"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="值">
          <template #default="scope">
            <el-input
              style="width: 100%"
              v-model="scope.row.value"
            />
          </template>
        </el-table-column>
      </sc-form-table>
    </ts-card>
      <ts-card header="模板组件设置">
        <template #header>
          <i style="float: right; margin-right: 10px" @click="addNode">
            <el-icon>
              <Plus />
            </el-icon>
          </i>
        </template>
        <draggable v-model="form.template.nodes" animation="700">
          <template #item="{ item, index }">
            <el-card style="margin-bottom: 20px">
              <template #header>
                <el-button
                  style="float: right"
                  @click="deleteNode(index)"
                  type="danger"
                  :icon="Delete"
                  circle
                />
                <el-form-item label="模板组件类型">
                  <el-select
                    v-model="form.template.nodes[index].component"
                    clearable
                    placeholder="请选择："
                    @change="templateCompoentTypeChange(index, $event)"
                  >
                    <el-option
                      v-for="item in componentList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
              <sc-form
                v-if="form.template.nodes[index].templateFormConfig"
                v-model="form.template.nodes[index]"
                ref="formRef"
                :config="form.template.nodes[index].templateFormConfig"
              >
              </sc-form>
            </el-card>
          </template>
        </draggable>
      </ts-card>
      <ts-card header="修改状态组件设置">
        <sc-form
          v-if="form.editItem.component"
          ref="formRef"
          :config="editItemFormConfig"
          v-model="form.editItem"
        >
        </sc-form>
        <ts-card
          v-if="checkCompoent(form.editItem.component)"
          header="数据集对象设置"
          style="margin-top: 10px"
        >
          <dataSet
            v-model:formData="form.editItem.dataset"
            :configData="configData"
          ></dataSet>
        </ts-card>
      </ts-card>
    </el-form>
  </el-scrollbar>
</template>
<script setup>
import { ref, defineModel, computed, onMounted } from "vue";
import API from "@/api/model/report.js";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { getTemplateFormConfig, getEditItemFormConfig } from "./formConfig.js";
import { checkCompoent } from "@/views/report/setting/utils/check";
import dataSet from "../dataSet.vue";
import draggable from "vuedraggable";
import tool from '@/views/report/setting/utils/tool'
import tsCodeEditor from '@/components/scCodeEditor/index.vue'
import { deepClone } from "@/utils/arr.js";
const emit= defineEmits(['update','init'])
const form = defineModel("formData");
const fieldList = ref([])
const cloneAttributes = ref([])
const props = defineProps({
  configData: { type: Array, default:()=> [] },
  fileName: { type: String, default: "" },
});
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const editItemFormConfig = ref([]);
const attributesTemplate = {key:'',value:''}
const fixList = [
  { value: "left", label: "左" },
  { value: "right", label: "右" },
];
const columnTypeList = [
  { value: "selection", label: "复选框" },
  { value: "index", label: "索引" },
  { value: "expand", label: "展开列" },
];
const alignList = [
  { value: "left", label: "左" },
  { value: "right", label: "右" },
  { value: "center", label: "中间" },
];
const componentList = [
  { value: "tag", label: "标签" },
  { value: "spanLink", label: "文字链接" },
  { value: "rate", label: "评分" },
  { value: "image", label: "图片" },
  { value: "icon", label: "图标" },
  { value: "button", label: "按钮" },
];
const componentList2 = [
  { value: "input", label: "输入框" },
  { value: "select", label: "选择框" },
  { value: "switchv", label: "滑块" },
  { value: "datePicker", label: "日期选择" },
];
onMounted(() => {
  getInit();
  cloneAttributes.value = deepClone(form.value.cloneAttributes?form.value.cloneAttributes:[])
  form.value.template.nodes.forEach((element) => {
    element.templateFormConfig = getTemplateFormConfig(
      element.component,
      props.configData,
      form.value
    );
  });
  editItemFormConfig.value = getEditItemFormConfig(
    form.value.editItem.component,
    props.configData,
    form.value
  );
  if (checkCompoent(form.value.editItem.component)) {
    form.value.editItem.dataset = {};
  }
});
const getInit = async () => {
  let res = await API.getFieldList.post({
    fileName: props.fileName,
    tableId: form.value.tableId,
  });
  if (res.code == 200) {
    fieldList.value = res.dataList;
  }
};
const templateCompoentTypeChange = (index, val) => {
  if (val) {
    form.value.template.nodes[index].templateFormConfig = getTemplateFormConfig(
      val,
      props.configData,
      form.value
    );
  }
};
const editItemCompoentTypeChange = (val) => {
  if (checkCompoent(val)) {
    form.value.editItem.dataset = {};
  }
  editItemFormConfig.value = getEditItemFormConfig(
    val,
    props.configData,
    form.value
  );
};
const addNode = () => {
  form.value.template.nodes.push({});
};
const deleteNode = (val) => {
  form.value.template.nodes.splice(val, 1);
};
const saveColumnField = async() => {
  form.value.cloneAttributes = tool.convert.arrToMap(cloneAttributes.value)
  let param = {
    fileName: props.fileName,
    bean: form.value,
  };
  let res =await API.updateField.post(param);
  console.log(res)
  if (res.code == 200) {
    ElNotification.success({
      title: "",
      message: "操作成功！",
      duration: 2000,
    });
    emit('update',form.value)
    emit('init')
  }
};
</script>
<style lang="less" scoped></style>
